<template>
  <div>
    <div class="menusBody" @mouseleave="handleLeave">
      <ul class="menus">
        <li
          class="menu-item"
          @mouseenter="handleEnter(item,index)"
          v-for="(item,index) in city"
          :key="index"
        >{{item.type}}</li>
      </ul>
      <div class="menuContent" v-show="isshow">
        <ul class="sub-menus">
          <li class="sub-item" v-for="(item,index) in childrenCity" :key="index">
            <a href="javascript:;">
              <i>{{index+1}}</i>
              <a class="cityname" @click="jumpCity(item.city)">{{item.city}}</a>
              <a class="describe" @click="jumpCity(item.city)">{{item.desc}}</a>
            </a>
          </li>
        </ul>
      </div>
      <div class="recommendCity">
        <h4 class="recom-title">推荐城市</h4>
        <div class="cover">
          <img src="@/assets/test.jpg" alt />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["city"],
  data() {
    return {
      isshow: false,
      childrenCity: []
    };
  },
  methods: {
    handleEnter(item, index) {
      this.isshow = true;
      this.childrenCity = item.children;
    },
    handleLeave() {
      this.isshow = false;
    },
    //跳转页面
    jumpCity(params) {
      this.$emit("SendCity", params);
      this.$router.replace({
        path: "/post",
        query: {
          city: params
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.menusBody {
  position: relative;
  .menus {
    width: 100%;
    border: 1px solid #ddd;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 0 1px #f5f5f5;
    position: relative;
    z-index: 2;
    .menu-item {
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      background-color: #fff;
      font-size: 14px;
      position: relative;
      z-index: 2;
      &::after {
        content: "";
        width: 10px;
        height: 10px;
        display: block;
        border-right: 1px solid #ddd;
        border-top: 1px solid #ddd;
        transform: rotateZ(45deg);
        position: absolute;
        top: 15px;
        right: 20px;
      }
      &:hover {
        color: orange;
        cursor: pointer;
        border-right: none;
      }
    }
  }
  .menuContent {
    border: 1px solid #ddd;
    background: #fff;
    position: absolute;
    width: 346px;
    box-sizing: border-box;
    padding-left: 20px;
    height: fit-content;
    top: 0;
    left: 260px;
    z-index: 1;
    .sub-menus {
      .sub-item {
        font-size: 14px;
        color: orange;
        height: 42px;
        line-height: 42px;
        a {
          i {
            font-style: italic;
            font-size: 24px;
          }
          .cityname {
            margin: 0 16px;
            &:hover {
              text-decoration: underline;
              color: orange;
            }
          }
          .describe {
            color: #999;
            &:hover {
              text-decoration: underline;
              color: #999;
            }
          }
          &:hover {
            color: none;
          }
        }
      }
    }
  }
  .recommendCity {
    margin-top: 20px;
    .recom-title {
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
      margin-bottom: 10px;
      font-weight: 400;
    }
    .cover {
      img {
        width: 260px;
        height: 174px;
        object-fit: cover;
      }
    }
  }
}
</style>